<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        /*html, body {*/
        /*    height: 100%;*/
        /*}*/
        html, body {
            height: 100%;
        }

        body {
            display: flex;
            padding: 40px 40px;
            background-color: #8EC5FC;
            background-image: -webkit-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            background-image: -moz-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            background-image: -o-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
        }
        .box1 {
            width: 60%;
            margin-top: 60px;
        }
        .box2 {
            margin: 120px auto;
        }
    </style>
</head>
<body>
<div class="box1">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" style="border-radius: 20px">
            <div class="carousel-item active">
                <img th:src="@{/img/1.jpg}" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img th:src="@{/img/2.jpg}" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img th:src="@{/img/3.jpg}" class="d-block w-100" alt="...">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<div class="box2">
    <h1 style="margin-bottom: 40px">欢迎使用图书管理系统</h1>
    <div>
        <form th:action="@{/login}" method="post">
            <div class="form-group">
                <label for="username" class="">用户名:</label>
                <input type="text" class="form-control" id="username" name="username">
            </div>
            <div class="form-group">
                <label for="password" class="">密码:</label>
                <input type="password" class="form-control" id="password" name="password">
            </div>
            <input type="submit" class="btn btn-primary btn-lg" value="登&nbsp;&nbsp;&nbsp;&nbsp;录" style="margin-top: 20px">
        </form>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>